<template>
    <view class="mx-nav">
        <view class="nav-box">
            <scroll-view class="nav-scroll" :scroll-x="true" :scroll-y="false" @scroll="scrollTap">
                <view class="nav-content">
                    <view class="card" v-for="(item, index) in info.list" :key="index" @click.stop="go(item)">
                        <view class="nav-item">
                            <image class="item-img" :src="$imgUrl + item.img" />
                            <text class="itme-txt">
                                {{ item.name }}
                            </text>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script setup>
const {proxy} = getCurrentInstance()
const props= defineProps({
    info: {
        type: Object,
        default: {},
    },
})
const { nav } = toRefs(props)
const data = reactive({
    left: `50%`
})
const { left } = toRefs(data)

function scrollTap(e) {
    let scrollLeft = e.detail.scrollLeft + 375
    let scrllWidth = e.detail.scrollWidth
    let left
    if (scrollLeft < 395) {
        left = `50%`
    } else {
        left = `${(scrollLeft / scrllWidth) * 100}%`
    }
    data.left = left //模拟滑块滑动 根据css设置 距离左边的百分比 在data定义
}

function go(item) {
    let u = item.url || item.link
    proxy.$go(u)
}
</script>

<style scoped lang="scss">
.mx-nav {
    width: 100%;
    padding: 0 20rpx 0;
}

.nav-box {
    border-radius: 16rpx;
    // background-color: #fff;
    height: 330rpx;
}

.nav-scroll {
    width: 100%;
    height: auto;
    box-sizing: border-box;
   

    .nav-content {
        width: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 310rpx;

        .card {
            width: 140rpx;
            height: 150rpx;
            // border: 1px solid #f00;
            text-align: center;
            position: relative;

            .nav-item {
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 20rpx;
            }

            .item-img {
                width: 100rpx;
                height: 100rpx;
            }

            .itme-txt {
                font-size: 22rpx;
                color: #1f1f1f;
                margin-top: 6rpx;
            }
        }
    }
}

.slider {
    position: relative;
    left: 50%;
    top: 6rpx;
    // transform: translateX(-50%);
    width: 72rpx;
    height: 8rpx;
    background: #ececec;
    border-radius: 4rpx;
    // margin-top: 24rpx;
    margin-left: -32rpx;
}

.slider-inside {
    position: absolute;
    transform: translateX(-100%);
    width: 36rpx;
    height: 100%;
    border-radius: 4rpx;
    background: $main_color;
    left: 50%; //根据滚动条宽度进行调整百分比
}
</style>
